<template>
	<view>
		<!-- <uv-navbar title="货源详情" :autoBack="true" :placeholder="true" bg-color="/static/img/bg_1.png" imgMode="aspectFill"></uv-navbar> -->
		<view class="topSty">
			<view :style="{height: statusBarHeight + 'px'}"></view>
			<div class="header">
				<div class="back center" @click="back">
					<image src="/static/icon/back.png" mode="widthFix" class="w-20"></image>
				</div>
				{{$t('货源详情')}}-{{$t('普通')}}
			</div>
			<view v-if="allInfo.demand && allInfo.demand.split(',').includes('1')">
				<route :allInfo="allInfo" />
			</view>
		</view>

		<view class="info_path">
			<view class="title">
				{{$t('服务需求')}}
			</view>

			<div class="path" v-if='get(allInfo, "departure.area_info.name")'>
				<view class="path_item">
					<image class="ico_p" src="/static/img/ico_p1.png" mode="widthFix"></image>
					<!-- <image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image> -->

					<view class="item">
						<view class="name">
							{{ get(allInfo, "departure.area_info.name") }}
						</view>
						<view class="text">
							{{ get(allInfo, "departure.area_info.mergename") }}
						</view>
						<div class="text">
							{{ get(allInfo, "departure.content") }}
						</div>
					</view>
				</view>
			</div>

			<view v-show="allInfo.demand_area.length > 0" class="path" v-for="item in allInfo.demand_area">
				<view class="path_item" v-if="get(item, 'area_info.name')">
					<!-- <image class="ico_p" src="/static/img/ico_p1.png" mode="widthFix"></image> -->
					<!-- <image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image> -->
					<image class="ico_p" src="/static/img/ico_p3.png" mode="widthFix"></image>

					<view class="item">
						<view class="name">
							{{ get(item, 'area_info.name') || '' }}
						</view>
						<view class="text">
							{{ get(item, 'area_info.mergename') || '' }}
						</view>
						<view class="tag">
							{{ demandList[item.demand] }}
						</view>
					</view>
				</view>
			</view>

			<div class="path" v-if='get(allInfo, "reach.area_info.name")'>
				<view class="path_item">
					<image class="ico_p" src="/static/img/ico_p2.png" mode="widthFix"></image>

					<view class="item">
						<view class="name">
							{{ get(allInfo, "reach.area_info.name") }}
						</view>
						<view class="text">
							{{ get(allInfo, "reach.area_info.mergename") }}
						</view>
						<div class="text">
							{{ get(allInfo, "reach.content") }}
						</div>
					</view>
				</view>
			</div>

			<!-- <view v-show="allInfo.demand_area.length == 0 && allInfo.demand != 1" class="fz28 text-555 text-center">{{$t('暂无')}}
			</view> -->

		</view>

		<div class="flex between px-50 mt-40 mb-40" v-if="allInfo.demand">
			<div class="fz26 text-gray-555" :class="{ 'infoTabActive': infoTabIndex == 0 }" @click="infoTabIndex = 0">
				{{$t('货物信息')}}</div>
			<div class="fz26 text-gray-555" :class="{ 'infoTabActive': infoTabIndex == 3 }" @click="infoTabIndex = 3">
				{{$t('备注信息')}}</div>
			<div class="fz26 text-gray-555" :class="{ 'infoTabActive': infoTabIndex == 1 }" @click="infoTabIndex = 1">
				{{$t('运输信息')}}</div>
			<div class="fz26 text-gray-555" :class="{ 'infoTabActive': infoTabIndex == 2 }" @click="infoTabIndex = 2"
				v-if="allInfo.demand.indexOf('2') !== -1 || allInfo.demand.indexOf('3') !== -1 || allInfo.demand.indexOf('4') !== -1 || allInfo.demand.indexOf('5') !== -1 || allInfo.demand.indexOf('6') !== -1">
				{{$t('通关服务')}}</div>
			<div class="fz26 text-gray-555" :class="{ 'infoTabActive': infoTabIndex == 4 }" @click="infoTabIndex = 4"
				v-if="get(allInfo, 'clearance_find.id')">{{$t('货物通关信息')}}</div>
		</div>

		<div class="info_bor" v-if="infoTabIndex == 4">

			<labelItem title="是否代缴纳关税" :allInfo="allInfo"
				:value="get(allInfo, 'clearance_find.is_duties') == 1 ? '是' : '否'" />
			<labelItem title="商品名称" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.name')" />
			<labelItem title="海关编码" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.sn')" />
			<labelItem title="商品数量" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.number')" />
			<labelItem title="商品价格" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.price')" />
			<labelItem title="备注" :allInfo="allInfo" :value="get(allInfo, 'clearance_find.content.remark')" />


			<fileItem :allInfo="allInfo" :title="$t('合同')" keyName="clearance_find.attachment" />
			<fileItem :allInfo="allInfo" :title="$t('箱单')" keyName="clearance_find.packing" />
			<fileItem :allInfo="allInfo" :title="$t('发票')" keyName="clearance_find.invoice" />
			<fileItem :allInfo="allInfo" title="CMR" keyName="clearance_find.cmr" />
			<fileItem :allInfo="allInfo" :title="$t('货物照片')" keyName="clearance_find.image" />

		</div>

		<view class="info_bor" v-if="infoTabIndex == 0">
			<view class="title">
				{{$t('货物信息')}}
			</view>
			<labelItem title="订单编号" :allInfo="allInfo" :value="allInfo.order_no" />

			<view class="item" v-if="allInfo.load_num > 0 || allInfo.unload_num > 0">
				<view class="name">
					{{$t('包含装卸')}}
				</view>
				<view class="info" style="color: #298dfe;">
					{{ allInfo.load_num }}{{$t('装')}}/{{ allInfo.unload_num }}{{$t('卸')}}
				</view>
			</view>
			<view class="item" v-if="allInfo.is_load == 1">
				<view class="name">
					{{$t('需要装卸服务')}}
				</view>
				<view class="info" >
					{{$t('是')}}
				</view>
			</view>
			<view class="item" v-if="allInfo.is_stock == 1">
				<view class="name">
					{{$t('需要仓储服务')}}
				</view>
				<view class="info" >
					{{$t('是')}}
				</view>
			</view>

			<labelItem title="货物名称" :allInfo="allInfo" :value="get(allInfo, 'goods_info.title')" />
			<labelItem title="包装方式" :allInfo="allInfo" :value="get(allInfo, 'goods_info.package.title')" />
			<labelItem title="装卸方式" :allInfo="allInfo" :value="get(allInfo, 'goods_info.unload.title')" />
			<labelItem title="货物重量" :allInfo="allInfo" :value="get(allInfo, 'goods_info.goods_weight') + (allInfo.goods_type == 1 ? 'kg' : '吨')" />
			<labelItem title="货物体积" :allInfo="allInfo" :value="get(allInfo, 'goods_info.goods_volume') + '立方米'" />
			<labelItem title="货物密度" :allInfo="allInfo"
				:value="(allInfo.goods_type == 1 ? Number(get(allInfo, 'goods_info.goods_weight') / get(allInfo, 'goods_info.goods_volume')).toFixed(2) : Number(get(allInfo, 'goods_info.goods_weight') * 1000 / get(allInfo, 'goods_info.goods_volume')).toFixed(2)) + 'kg/m³'" />

			<labelItem title="包装总件数" :allInfo="allInfo" :value="get(allInfo, 'goods_info.goods_num')" />



			<view class="item" v-if="get(allInfo, 'goods_info') > 0">
				<view class="name">
					{{$t('特殊尺寸')}}
				</view>
				<view class="info">
					<view v-for="(item, index) in allInfo.goods_info.goods_l.split(',')" class="">
						{{ get(allInfo, "goods_info.goods_l").split(',')[index] }}m *
						{{ get(allInfo, "goods_info.goods_w").split(',')[index] }}m *
						{{ get(allInfo, "goods_info.goods_h").split(',')[index] }}m
					</view>
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货物照片')}}
				</view>
			</view>
			<view class="item_photo">
				<image v-for="item in get(allInfo, 'goods_info.attachment', [])" class="ph" :src="item.path"
					mode="aspectFill" @click="previewImg(allInfo.goods_info.attachment, item.path)"></image>
			</view>

			<view class="item" v-if="get(allInfo, 'attachment_info.length') > 0">
				<view class="name">
					{{$t('货物清单')}}
				</view>
			</view>
			<view class="item_cargo">
				<view v-for="item in allInfo.attachment_info" class="item_cargo_info" @click="downloadFile(item)">
					<image class="ico" src="/static/img/ico_pdf.png" mode="widthFix"></image>
					<view class="text" v-if="item.path">
						{{ item.path.split("/")[item.path.split("/").length - 1]}}
					</view>
				</view>
				<!-- <view class="item_cargo_info">
					<image class="ico" src="/static/img/ico_jpg.png" mode="widthFix"></image>
					<view class="text">
						{{$t('货物清单')}}.jpg
					</view>
				</view> -->
			</view>

			<labelItem title="装货时间" :allInfo="allInfo" :value="allInfo.delivery_at" />
		</view>

		<view class="info_bor" v-if="infoTabIndex == 1">
			<view class="title">
				{{$t('运输信息')}}
			</view>
			<view class="item">
				<view class="name">
					{{$t('运输类型')}}
				</view>
				<view class="info">
					{{ allInfo.transport_type == 1 ? $t('整车') : $t('散货') }}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('运输方式')}}
				</view>
				<view class="info">
					{{ transportList.filter(item => item.key == allInfo.transport_way)[0].value || '' }}
				</view>
			</view>
			<view class="item" v-if='get(allInfo, "vehicle_info.title")'>
				<view class="name">
					{{$t('载具类型')}}
				</view>
				<view class="info">
					{{ get(allInfo, "vehicle_info.title") }}
				</view>
			</view>


			
			<view class="item">
				<view class="name">
					{{$t('需求数量')}}
				</view>
				<view class="info">
					{{ get(allInfo, "goods_num") }}
				</view>
			</view>
		</view>

		<div v-if="infoTabIndex == 2">
			<view class="info_bor"
				v-if="allInfo.demand.indexOf('2') !== -1 || allInfo.demand.indexOf('3') !== -1 || allInfo.demand.indexOf('4') !== -1 || allInfo.demand.indexOf('5') !== -1 || allInfo.demand.indexOf('6') !== -1">
				<view class="title">
					{{$t('通关服务')}}
				</view>
				<view class="item">
					<view class="name">
						{{$t('报关城市')}}
					</view>
					<view v-if="allInfo.demand_area.length > 0" class="info">
						{{ get(allInfo.demand_area.find(item => item.demand == '2'), "area_info.mergename", $t('无')) }}
					</view>
				</view>
				<view class="item">
					<view class="name">
						{{$t('转关城市')}}
					</view>
					<view v-show="allInfo.demand_area.length > 0"
						v-for="city in allInfo.demand_area.filter(item => item.demand == '3')" class="info">
						{{ get(city, "area_info.mergename") }}
					</view>
					<div class="info" v-if="allInfo.demand_area.filter(item => item.demand == '3').length == 0">
						{{$t('无')}}
					</div>
				</view>
				<view class="item">
					<view class="name">
						{{$t('清关城市')}}
					</view>
					<view v-if="allInfo.demand_area.length > 0" class="info">
						{{ get(allInfo.demand_area.find(item => item.demand == '4'), "area_info.mergename", $t('无')) }}
					</view>
				</view>
			</view>
		</div>

		<view class="info_bor" v-if="infoTabIndex == 3">
			<view class="title">
				{{$t('备注信息')}}
			</view>
			<!-- <view class="item">
				<view class="name">
					{{$t('装货时间')}}
				</view>
				<view class="info">
					{{$t('现在用车')}}
				</view>
			</view> -->
			<template v-if="get(allInfo, 'remark_info.remark')">
				<view class="item">
					<view class="name">
						{{$t('订单备注')}}
					</view>
				</view>
				<view class="item_remark bg-gray-300 p-20 fz26 rounded-20">
					{{ get(allInfo, 'remark_info.remark', $t('未填写订单备注')) }}
				</view>
			</template>
			<view class="item">
				<view class="name">
					{{$t('联系电话')}}
				</view>
				<view class="info">
					{{ allInfo.tel.substr(0, 3) + '****' + allInfo.tel.substr(7) }}
				</view>
			</view>
			<view class="item">
				<view class="name">
					{{$t('货主报价')}}
				</view>
				<view class="info">
					{{ currencyUtils.getSymboleByCode(allInfo.price_unit) }}{{ allInfo.price }}
				</view>
			</view>

		</view>




		<u-modal class="modalSty" :show="show" :content="content" :showCancelButton="true" @cancel="cancel"
			@confirm="confirm"></u-modal>
		<view class="footer_none"></view>
		<view class="footer_btn2 between px-20">
			<view class="btn" style="flex:1" @click="callUser">
				{{$t('联系货主')}}
			</view>
			<div class="w-40"></div>
			<view class="btn" style="flex:1;background: linear-gradient(to right ,#FF811E,#FFBE7C);"
				@click="goQutation">
				{{ allInfo.is_quotation == 1 ? $t('我的报价') : $t('发起报价') }}
			</view>
		</view>


		<u-popup :show="quotationShow" mode="bottom">
			<div style="height:90vh" class="w-full">

				<quotation :prop_delivery_id="allInfo.id" :price_unit="allInfo.price_unit" :sourceKey="true" @cancelQuote="() => {
					quotationShow = false
				}">
					<div class="center pt-20 font-bold  w-full">
						{{$t('报价')}}
						<div style="right:40rpx;top:20rpx;position: absolute">
							<image src="/static/icon/close.png" mode="widthFix" class="w-20 absolute"
								@click="quotationShow = false"></image>
						</div>
					</div>
				</quotation>
			</div>
		</u-popup>
	</view>
</template>

<script>
import route from "./components/route.vue"
import quotation from "pages/quotation/quotation.vue";
import fileItem from "./components/fileItem.vue";
import labelItem from "./components/labelItem.vue";
import { getOrderDetail } from "@/api/publish.js"
import { request_minute } from '@/api/basic'
export default {
	components: {
		route,
		quotation,
		fileItem,
		labelItem
	},
	data() {
		return {
			statusBarHeight: uni.getStorageSync('statusBarHeight') || 0,
			infoTabIndex: 0,
			quotationShow: false,
			demandList: {
				1: this.$t('运输'),
				2: this.$t('报关'),
				3: this.$t('转关'),
				4: this.$t('清关'),
			},
			remarkValue: '',
			IMAGE_URL: 'https://gluz-oss.oss-cn-beijing.aliyuncs.com/',
			allInfo: {},
			show: false,
			content: '',
			transportList: [{
				key: '0',
				value: this.$t('不限')
			},
			{
				key: '1',
				value: '其他 '
			},
			{
				key: '2',
				value: this.$t('汽运')
			},
			{
				key: '3',
				value: this.$t('空运')
			},
			{
				key: '4',
				value: this.$t('海运')
			},
			{
				key: '5',
				value: this.$t('铁路')
			},
			],
		}
	},
	onLoad(options) {
		if (options.id) {
			uni.showLoading({
				title: this.$t('加载中'),
				mask: true
			})
			getOrderDetail({ delivery_id: options.id }).then(res => {
				this.allInfo = res.data.data.data
				console.log('this.allInfo---', this.allInfo)
				uni.hideLoading()
			})
		} else {
			uni.showModal({
				title: this.$t('提示'),
				content: '没传递ID，无法请求详情，联系开发者',
				showCancel: false,
				success: function (res) {
					uni.navigateBack()
				}
			});
		}
		// this.allInfo = JSON.parse(options.item)

		// console.log(JSON.parse(options.item));
	},
	methods: {
		downloadFile(item) {
			console.log('item----',item);
			this.isMessageGo({
				action: 'downloadFile',
				data: {
					url: this.getImageUrl(item.path)
				}
			})
		
		},
		back() {
			// uni.navigateBack()
			this.cback()
		},
		goQutation() {
			if (this.allInfo.user_id == uni.getStorageSync("user_id")) {
				uni.$u.toast('无法给自己报价')
			} else {
				this.quotationShow = true
			}
			
		},
		callUser() {
			if(uni.getStorageSync("user_id") == this.allInfo.user_id) {
				uni.showToast({
					title: this.$t('不能给自己打电话'),
					icon: "none",
				});
			} else {
				request_minute({
					user_id: uni.getStorageSync("user_id"),
						target_id: this.allInfo.user_id,
				}).then(res => {
					if (res.data.data.flag == 1) {
						this.isMessageGo({
							action: 'call',
							data: {
								userId: this.allInfo.user_id,
									type: res.data.data.type || 1,
							}
						})
					} else {
						uni.$u.toast('积分不足，请充值积分')
						setTimeout(() => {
							uni.navigateTo({
								url: '/pages/vip/scorePoint',
							})
						}, 500)
					}
					console.log('res0000', res)
				})
			}
		},
		cancel() {
			this.show = false
		},
		confirm() {
			uni.makePhoneCall({
				phoneNumber: this.allInfo.tel || ''
			})
			this.show = false
		},
		previewImg(arr, url) {
			uni.previewImage({
				urls: arr.map(item => item.path),
				current: url
			})
		}
	}
}
</script>

<style lang="scss">
.flex-wrap {
	flex-wrap: wrap;
}

.infoTabActive {
	position: relative;
	font-size: 32rpx;
	font-weight: bold;
	color: #1d1d1d;
}

.infoTabActive::after {
	content: '';
	position: absolute;
	bottom: -13rpx;
	left: 50%;
	margin-left: -27rpx;
	background: linear-gradient(to right, #278AFF, #66D6E2);
	width: 54rpx;
	height: 6rpx;
	z-index: 9;
	border-radius: 10rpx;
}

page {
	background: #F6F7FB;
	padding-bottom: 30rpx;
}

.topSty {
	border-radius: 0 0 40rpx 40rpx;
	position: sticky;
	z-index: 10;
	top: 0;
	background: #F6F7FB url("/static/bg/backcolorImg.png") no-repeat top / 100%;
	// padding-top: 20rpx;
}

.header {
	font-size: 34rpx;
	height: 100rpx;
	line-height: 100rpx;
	font-weight: bold;
	text-align: center;
	position: relative;
	padding-top: var(--status-bar-height);
}

.back {
	position: absolute;
	width: 70rpx;
	height: 70rpx;
	top: 15rpx;
}

.info_path {
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 0 24rpx 20rpx;

	.path {
		position: relative;

		&::after {
			content: '';
			position: absolute;
			left: 20rpx;
			top: 20rpx;
			bottom: 0;
			border-left: 1px solid #eee;
		}

		.path_item_ico {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			align-content: flex-start;
			margin-bottom: 20rpx;

			.ico_p {
				flex-shrink: 0;
				width: 40rpx;
				margin-right: 24rpx;
				position: relative;
				z-index: 9;
			}
		}

		.path_item {
			display: flex;
			align-items: flex-start;
			justify-content: space-between;
			align-content: flex-start;
			padding: 15rpx 0;
			position: relative;

			.item {
				width: 100%;

				.name {
					color: #1D1D1D;
					font-size: 32rpx;
					font-weight: 600;
					line-height: 40rpx;
				}

				.text {
					color: #8C8C8C;
					font-size: 24rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
				}

				.tag {
					width: 128rpx;
					height: 44rpx;
					flex-shrink: 0;
					border-radius: 500rpx;
					background: #D7E8FA;
					text-align: center;
					color: #278AFF;
					font-size: 22rpx;
					line-height: 44rpx;
					margin-top: 15rpx;
				}
			}

			.ico_p {
				flex-shrink: 0;
				width: 40rpx;
				margin-right: 24rpx;
				position: relative;
				z-index: 9;
			}
		}
	}

	.title {
		color: #1D1D1D;
		font-size: 30rpx;
		font-weight: 600;
		// line-height: 28rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin-bottom: 15rpx;
	}
}

.info_bor {
	margin: 20rpx 24rpx 0;
	background: #fff;
	border-radius: 20rpx;
	padding: 0 24rpx 20rpx;

	.item_remark {
		padding-bottom: 15rpx;
	}

	.item_cargo {
		.item_cargo_info {
			height: 88rpx;
			flex-shrink: 0;
			border-radius: 18rpx;
			background: #F6F7FB;
			display: flex;
			align-items: center;
			padding: 0 24rpx;
			margin-bottom: 16rpx;

			.ico {
				width: 32rpx;
				height: 38rpx;
				flex-shrink: 0;
				margin-right: 10rpx;
			}

			.text {
				color: #1D1D1D;
				font-size: 28rpx;
				line-height: 28rpx;
			}
		}
	}

	.item_photo {
		display: flex;
		align-items: flex-start;
		justify-content: flex-start;
		align-content: flex-start;
		flex-wrap: wrap;
		gap: 24rpx;
		padding: 10rpx 0 30rpx;

		.ph {
			width: 200rpx;
			height: 200rpx;
			flex-shrink: 0;
			border-radius: 20rpx;
		}
	}

	.item {
		display: flex;
		align-items: flex-start;
		justify-content: space-between;
		padding: 18rpx 0;

		.name {
			flex-shrink: 0;
			color: #535353;
			font-size: 28rpx;
			line-height: 40rpx;
			margin-right: 30rpx;
		}

		.info {
			color: #1D1D1D;
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}

	.title {
		color: #1D1D1D;
		font-size: 30rpx;
		font-weight: 600;
		line-height: 28rpx;
		height: 96rpx;
		line-height: 96rpx;
		border-bottom: 1rpx solid #F0F0F0;
		margin-bottom: 15rpx;
	}
}

.city {
	padding: 50rpx 60rpx;
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	background: #fff;
	border-radius: 0 0 40rpx 40rpx;
	box-shadow: 0 5rpx 10rpx rgba(0, 0, 0, 0.05);

	.line {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		margin-top: -24rpx;

		.text {
			color: #278AFF;
			font-size: 26rpx;
			font-weight: 500;
			line-height: 28rpx;
		}

		.ico {
			width: 50%;
		}
	}

	.citySty {
		color: #535353;
		font-family: "PingFang SC";
		font-size: 22rpx;
		font-style: normal;
		font-weight: 400;
		margin-top: 16rpx;
	}

	.city_item {
		flex-shrink: 0;
		display: flex;
		align-items: center;

		.ico {
			flex-shrink: 0;
			width: 50rpx;
			flex-shrink: 0;
			margin-right: 10rpx;
		}

		.name {
			font-size: 28rpx;
			font-weight: 600;
			line-height: 40rpx;
		}
	}
}

.modalSty {
	text-align: center;
}

.footer_none {
	height: 160rpx;
}

.footer_btn2 {
	width: 100%;
	height: 128rpx;
	background: #FFF;
	display: flex;
	justify-content: space-evenly;
	align-items: center;
	position: fixed;
	bottom: 0;
	z-index: 10;
	.btn {
		width: 94%;
		height: 94rpx;
		flex-shrink: 0;
		border-radius: 500rpx;
		border: 2rpx solid rgba(3, 189, 130, 0.10);
		background: linear-gradient(90deg, #278AFF 0%, #66D6E2 100%);
		line-height: 94rpx;
		text-align: center;
		color: #FFF;
		font-family: "PingFang SC";
		font-size: 32rpx;
		font-style: normal;
		font-weight: 600;
	}
}
</style>